<!--
 * @Author: chenzechao
 * @Date: 2024-01-26 11:13:16
 * @LastEditors: chenzechao
 * @LastEditTime: 2024-01-26 14:10:12
 * @FilePath: \accesscontrolui\src\components\Pagination\index.vue
 * @Description: 
-->
<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <section class="default-slot">
      <slot></slot>
    </section>
    <section class="pagination-num">
      <span>共{{ total || 0 }}个结果</span>
      <el-pagination
        :background="background"
        :current-page.async="pageNumber"
        :page-size.async="pageSize"
        :layout="layout"
        :total="total"
        :pageSizes="pageSizes"
      />
    </section>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      required: true,
      type: Number,
    },
    currentNumber: {
      type: Number,
      default: 1,
    },
    currentSize: {
      type: Number,
      default: 10,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 50, 100];
      },
    },
    layout: {
      type: String,
      default: " prev, pager, next, jumper",
    },
    background: {
      type: Boolean,
      default: true,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    pageSize: {
      get: function() {
        return this.currentSize;
      },
      set: (val) => {
        this.$emit("change-size", val);
      },
    },
    pageNumber: {
      get: function() {
        return this.currentNumber;
      },
      set: (val) => {
        this.$emit("change-number", val);
      },
    },
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  padding: 10px 20px;
  justify-content: space-between;
  .pagination-num {
    display: flex;
    align-items: center;
    span {
      color: rgba(114, 123, 143, 1);
      margin-right: 10px;
    }
  }
}

.pagination-container.hidden {
  display: none;
}
</style>
